<template>
  <div class="list">
    <list>
        <cell class="listItem" v-for="(item, index) in longList" :key="index" @click="goDetail(longList[index], index)" :class="[index === activeIndex ? 'active' : '']">
            <div class="left">
                <image :src="item.AZT" class="img"></image>
            </div>
            <div class="right">
                <text class="title">{{item.SBLXMC}}({{item.SBXH}})</text>
                <text class="address">{{item.XXDZ}}</text>
                <span class="state">
                    <text class="stateText">安装完毕</text>
                    <text class="stateText">{{item.HZXM}}</text>
                </span>
                <text class="reason">故障原因:{{item.SBGZQK}}</text>
            </div>
        </cell>
    </list>
  </div>
</template>
<script>
import { getCache } from '@/util/storageUtils'
import { CTCE_USER_INFO } from '@/config/storageTypes'
import event from '@/net/event'

export default {
    name: 'listCont',
    data () {
        return {
            activeIndex: null
        }
    },
    beforeCreate(){
        this.$notice.loading.show()
    },
    methods: {
        goDetail(index, ind) {
            this.activeIndex = ind
            this.$router.open({
               name: 'detail',
                params: {
                    datalist: index
                }
            })
        }
    },
    computed: {
        longList () {
            return this.$store.state.listData
        }
    }
}
</script>
<style scoped>
.list{
    position: absolute;
}
.listItem{
    width: 750px;
    height: 250px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-bottom-color: #eee;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding: 20px;
    background-color: #fff;
}
.left{
    width: 279px;
    height: 201px;
    border-color: #f5f5f5;
    border-style: solid;
    border-width: 1px;
}
.img{
    width: 279px;
    height: 201px;
}
.right{
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 10px;
}
.title{
    font-size:29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(58,58,72,1);
    padding-bottom: 15px;
}
.address{
    font-size:29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(153,153,153,1);
    padding-bottom: 15px;
}
.state{
    display: block;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 15px;
}
.stateText{
    border-color:rgba(62,175,252,1);
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 20.8px;
    font-family:PingFangSC-Regular;
    color:rgba(62,175,252,1);
    margin-right: 15px;
}
.reason{
    font-size:20.8px;
    font-family:PingFangSC-Regular;
    color:rgba(62,175,252,1);
}
.active{
  background-color: rgba(62,175,252,0.2);
}
</style>
